@charset "utf-8";
@import "reset";
@import "common";

.wrap{
    header{
        i{
            position: relative;
            .information-number{
                position: absolute;
                right: 0;
                top: 0;
                width: vw(30);
                height: vw(30);
                background-color: #fa5050;
                font-size: vw(10);
                text-align: center;
                color: #fff;
                border-radius: 50%;
            }
        }
    }
    main{
        .mine-information{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .head-picture{
                width: vw(170);
                height: vw(170);
                background: url(../img/picture.png) no-repeat;
                background-size: cover;
            }
            .information-set{
                flex: 1;
                margin-left: vw(25);
                display: flex;
                flex-direction: column;
                a:first-child{
                    font-size: vw(30);
                    color: #000;
                    margin-bottom: vw(18);
                }
                a:last-child{
                    margin-top: vw(18);
                    color: #9d9d9d;
                }
            }
            .go-set{
                a{
                    font-size: vw(87);
                    color: #000;
                }
            }
        }
        .my-box{
            margin: vw(26) auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .my-evaluation{
                @extend %three-3;
                background-color: #b2e0a0;
            }
            .my-collection{
                @extend %three-3;
                background-color: #a0dce0;
            }
            .my-coupon{
                @extend %three-3;
                background-color: #e0b7a0;
            }
        }
        .other-set{
            .friend{
                .title{
                    .left{
                        i{
                            color: #b2e0a0;
                        }
                    }
                }
            }
            .footprint{
                .title{
                    .left{
                        i{
                            color: #a0dce0;
                        }
                    }
                }
            }
        }
        .my-set{
            margin-top: vw(79);
        }
        .quit-off{
            display: flex;
            justify-content: space-around;
            margin-top: vw(36);
            .quit{
                @extend %orange-button;
            }
            .log-off{
                @extend %orange-button;
            }
        }
    }
}
// 点评、收藏、优惠券具体样式
%three-3{
    width: vw(195);
    height: vw(151);
    text-align: center;
    i{
        font-size: vw(84);
        color: #fff;
        line-height: vw(110);
    }
    span{
        display: block;
    }
}
// 退出与注销按钮样式
%orange-button{
    width: vw(147);
    height: vw(76);
    background-color: $color;
    font-size: vw(30);
    color: #fff;
    border-radius:vw(38);
    border:vw(1) solid $color;
}